<template>
	<view>
		<view class="select-paint">
			<text class="t">选择店</text>
			<picker class="choosePicker" @change="bindPickerChange" :value="index" :range="array">
				<view class="uni-input">{{array[index]}}</view>
			</picker>
			<view class="r">
				<view class="paintList"><img src="../../../static/paintlist.png" /></view>
				<view class="tongji d-c-c" @click="stattics"><text>统计</text></view>
			</view>
		</view>
		<view class="date-setting">
			<text class="t">设置日期</text>
			<view class="r">
				<view class="dates d-c-c">
					<uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20"
						@change="change" />
				</view>
				<text class="xiazai d-c-c">下载报表</text>
			</view>
		</view>

		<view class="total-info">
			订单笔数：{{count}}，总金额：{{cost}}，上架费：{{shelvesExpenses}}
		</view>
		<template v-if="orders.length>0">
			<view class="order_info" v-for="item in orders" :key="item.id">
				<!--头-->
				<view class="info_header">
					<text>订单号：{{item.orderNumber}}</text>
					<text class="f_red" v-if="item.state==0">待付款</text>
					<text class="f_red" v-if="item.state==1">待收款</text>
					<text class="f_red" v-if="item.state==2">待上架</text>
					<text class="f_red" v-if="item.state==3">已上架</text>
				</view>
				<!--中-->
				<view class="info_center">
					<view class="tupian">
						<img src="../../../static/IMG6000.jpg" width="105" height="85" />
					</view>
					<view class="info_1">
						<view class="pro_name">
							<text>{{item.orderNumber}}</text>
						</view>
						<view class="seller">
							<text class="f_blue">{{item.sellUserName}}</text>
							<text class="seller_name">卖家</text>
						</view>
						<view class="seller_Code">
							<text>{{item.sellUserInvitationCode}}</text>
						</view>
						<view class="buyer">
							<text class="f_blue">{{item.buyUserName}}</text>
							<text class="buyer_name">买家</text>
						</view>
						<view class="buyer_Code">
							<text>{{item.buyUserInvitationCode}}</text>
						</view>
					</view>
					<view class="price f_red">￥{{item.price}}</view>
				</view>
				<!--底-->
				<view class="info_footer">
					<view class="footer_c">
						<text>下单时间：{{item.createTime}}</text>
						<text v-if="false">运费：<span class="f_red">￥0.00</span></text>
					</view>
					<view class="footer_c">
						<text>更新时间：{{item.updateTime}}</text>
						<text>实付：<span class="f_red">￥{{item.price,item.shelvesExpenses}}</span></text>
					</view>
				</view>
			</view>
		</template>
		<Nodata v-else></Nodata>
	</view>
</template>

<script>
	import Nodata from '@/components/Nodata.vue'
	import {
		getStoreList,
		getOrdersByStoreId,
	} from '@/request/api/shopTotal.js'
	export default {
		components: {
			Nodata
		},
		data() {
			return {
				single: "2021-04-3",
				array: [''],
				index: 0,
				stores: [], //所有店铺列表
				orders: [{
					id: '', //主键自增id
					orderNumber: '', //订单编号
					shopId: '', //商品Id
					storeId: '', //店铺Id
					buyUserId: '', //买家id
					buyUserName: '', //买家名称
					buyUserInvitationCode: '', //买家邀请码
					buyUserPhone: '', //买家手机号码
					sellUserId: '', //卖家id
					sellUserName: '', //卖家名称
					sellUserInvitationCode: '', //卖家邀请码
					sellUserPhone: '', //卖家手机号码
					price: 0, //价格
					createTime: '', //创建时间
					updateTime: '', //更新时间
					shelvesExpenses: 0, //上架费用
					seal: '', //是否已封存，0:未封存，1:已经封存
					sealTime: '', //封存时间
					transition: '', //是否转场,0:未转场,1:已经转场
					transitionTarget: '', //转场目标
					productName: '', //商品名称
					productImg: '', //商品图片链接
					productPrice: '', //商品价格
					orangeOrdersId: '', //原始订单ID
					splitId: '', //是否是拆分订单，0:不是拆分订单,1:是拆分订单
					params: '', //扩展参数
					state: '', //0:待付款，1:待收款，2:待上架，3:待出售,4.已出售
				}], //订单数据列表
				count: 0, //订单笔数
				cost: 0.00, //总金额
				shelvesExpenses: 0.00, //上架费
			}
		},
		methods: {
			bindPickerChange(val) {
				this.index = val.detail.value
			},
			change(val) {
				console.log(val)
			},
			add(price1, price2) {
				return (Number(price1) + Number(price2)).toFixed(2)
			},
			stattics() {
				getOrdersByStoreId(this.stores[this.index].id).then((res) => {
					if (res.data) {
						this.orders = res.data.list
						this.count = res.data.size
						this.cost = res.data.cost
						this.shelvesExpenses = res.data.shelvesExpenses
					}
				})
			}
		},
		onShow() {
			this.orders = []
			getStoreList().then((res) => {
				if (res.data) {
					this.stores = res.data
					this.array = res.data.map(item => item.storeName)
					this.index = 0
				}
			})
		}
	}
</script>

<style scoped>
	.select-paint,
	.date-setting {
		padding: 0 0 0 15px;
		border-bottom: .5px solid #eee;
		width: 100%;
		height: 50px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.select-paint .t,
	.date-setting .t {
		font-size: 15px;
		font-weight: 400;
		color: #333;
		line-height: 23px;
	}

	.select-paint .r,
	.date-setting .r {
		padding-right: 15px;
		justify-content: space-between;
		display: flex;
	}

	.paintList {
		align-items: center;
		margin-right: 10px;
		display: flex;
		flex: row;
	}

	.paintList img {
		width: 20px;
		height: 20px;
	}


	.select-paint .r .tongji,
	.date-setting .r .tongji {
		width: 80px;
		height: 30px;
		background-color: #fc4141;
		color: #fff;
		font-size: 15px;
		margin-right: 10px;
		border-radius: 5px;
	}

	.d-c-c {
		display: flex;
		justify-content: center;
		align-items: center;
	}



	.dates {
		margin: auto 5px;
		align-items: center;
		padding: 0 10px;
		justify-content: space-around;
		height: 33px;
		border: 1px solid #eee;
		border-radius: 4px;
		flex-direction: row;
	}


	.xiazai {
		margin: auto 5px;
		width: 80px;
		height: 30px;
		background-color: #288f1a;
		color: #fff;
		font-size: 15px;
		border-radius: 5px;
	}

	.total-info {
		margin-bottom: 10px;
		background: #fc4141;
		width: 100%;
		font-size: 14px;
		font-weight: 400;
		color: #fff;
		line-height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/*订单信息*/
	.f_red {
		color: #fc4141;
	}

	.f_blue {
		color: #2866f9;
	}

	.order_info {
		display: flex;
		flex-direction: column;
		margin-top: 10px;
		background: white;
		color: #999;
		padding: 0 15px;
		padding-bottom: 10px;
	}

	/*订单信息-头*/
	.order_info .info_header {
		display: flex;
		flex-direction: row;
		border-bottom: .5px solid #eee;
		justify-content: space-between;
		height: 49px;
		align-items: center;
	}


	/*订单信息-中*/
	.order_info .info_center {
		padding: 10px 0 0 0;
		border-bottom: 1px solid #eee;
		position: relative;
		display: flex;
		flex-direction: row;
	}

	.order_info .info_1 {
		width: 45%;
		justify-content: space-around;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		text-align: left;
	}

	.order_info .info_1 .pro_name {
		font-size: 15px;
		font-weight: 400;
		color: #333;
		line-height: 23px;
	}

	.order_info .info_1 .seller_name,
	.order_info .info_1 .buyer_name {
		display: inline-block;
		width: 48px;
		background-color: #ff4144;
		font-size: 13px;
		color: #fff;
		text-align: center;
		border-radius: 9px;
		margin-left: 10px;
		padding: 1px 0;
	}

	.order_info .info_1 .buyer_name {
		background-color: #288F1A;
	}

	.order_info .info_center .price {
		position: absolute;
		right: 5px;
		font-size: 13px;
		font-weight: 400;
		color: #fc4141;
		line-height: 20px;
	}


	/*订单信息-底部*/
	.info_footer {
		display: flex;
		flex-direction: column;
		margin-top: 10px;
	}

	.info_footer .footer_c {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.choosePicker {
		display: flex;
		flex: 1;
		justify-content: center;
	}
</style>